<template>
  <div class="theme_box data_tag">
    <n-avatar :size="48" :style="{ background: colors[Number.parseInt((Math.random() * 5) + '')] }">
      <a-icon name="Bat" :props="{ size: 30 }"></a-icon>
    </n-avatar>
    <div class="desc">
      <p>132 Sales</p>
      <span>12 waiting payments</span>
    </div>
  </div>
</template>
<script lang="tsx" setup>
let colors = ['#10b700', '#20dcab', '#2081dc', '#8b20dc', '#dc2094']
</script>
<style lang="scss" scoped>
.data_tag {
  padding: 14px;
  display: flex;

  .desc {
    flex: 1;
    margin-left: 8px;

    p {
      font-size: 16px;
      font-weight: 500;

      @include themeify {
        color: theme('font')
      }
    }
  }
}
</style>